<template>
	<view class="templates-container">
		<view class="template-list">
			<view class="template-item" v-for="template in templates" :key="template.id">
				<view class="template-info">
					<view class="template-header">
						<text class="template-title">{{ template.title }}</text>
						<text class="delete-btn" @tap.stop="deleteTemplate(template)">删除</text>
					</view>
					<view class="template-details">
						<text class="detail-item" v-if="template.sportType">
							{{ template.sportType.dictLabel }}
						</text>
						<text class="detail-item" v-if="template.maxPeople">
							{{ template.maxPeople }}人
						</text>
						<text class="detail-item" v-if="template.location">
							{{ template.location.address }}
						</text>
					</view>
					<view class="template-tags" v-if="template.tags">
						<text class="tag" v-for="(tag, index) in template.tags.split(',')" :key="index">
							{{ tag }}
						</text>
					</view>
				</view>
			</view>

			<view class="empty-tip" v-if="templates.length === 0">
				暂无活动模板
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyTemplates,
	} from '@/api/youqiu/activity.js'

	import {
		delTemplate
	} from '@/api/youqiu/template.js'

	export default {
		data() {
			return {
				templates: []
			}
		},

		onShow() {
			this.loadTemplates()
		},

		methods: {
			// 加载模板列表
			async loadTemplates() {
				try {
					const res = await getMyTemplates()
					if (res.code === 200) {
						this.templates = res.data
					}
				} catch (error) {
					console.error('获取模板列表失败:', error)
					uni.showToast({
						title: '获取模板列表失败',
						icon: 'none'
					})
				}
			},

			// 删除模板
			deleteTemplate(template) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个模板吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								const response = await delTemplate(template.id)
								if (response.code === 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									})
									this.loadTemplates() // 重新加载列表
								}
							} catch (error) {
								console.error('删除模板失败:', error)
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								})
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.templates-container {
		min-height: 100vh;
		background: #f5f5f5;
		padding: 20rpx;

		.template-list {
			.template-item {
				background: #fff;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;

				.template-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;

					.template-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.delete-btn {
						font-size: 28rpx;
						color: #ff6b35;
						padding: 10rpx 20rpx;

						&:active {
							opacity: 0.7;
						}
					}
				}

				.template-details {
					display: flex;
					gap: 20rpx;
					margin-bottom: 16rpx;

					.detail-item {
						font-size: 26rpx;
						color: #666;
					}
				}

				.template-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 12rpx;

					.tag {
						padding: 6rpx 16rpx;
						background: #f8f8f8;
						border-radius: 20rpx;
						font-size: 24rpx;
						color: #666;
					}
				}
			}

			.empty-tip {
				text-align: center;
				color: #999;
				font-size: 28rpx;
				padding: 40rpx 0;
			}
		}
	}
</style>